import { useEffect, useState, lazy } from 'react'
import { getAdminMenus } from './mockData'
import { RouterProvider, createHashRouter } from 'react-router-dom'

import Layout from './layout/Layout'
import NotFound from './NotFound'
import Login from './layout/login'
import Kanban from './pages/kanban'

import RouterContext from './RouterContext'

import { MenuItem, Moudle, Component, Router } from './types/index.d'
import { Spin } from 'antd'

console.warn('appp')

// 菜单入口文件 约定index为默认页面
const modules = import.meta.glob('./pages/*/*/index.tsx')

  components: {
    Menu: {
      darkItemColor: '#fff',
      darkItemBg: '#222733',
      darkSubMenuItemBg: '#222733',
      darkItemSelectedColor: '#ff5f01',
      darkItemSelectedBg: '#222733',
      darkItemHoverBg: '#222733'
    },

    Table: {
      headerColor: darkBgColor,
      cellFontSizeSM: 12
    }
  }
}

const darkTheme = {
  token: {
    colorPrimary: darkThemeColor,
    colorText: darkTextColor,
    colorBgContainer: darkBgThrColor,
    colorBorder: darkBorderColor,
    colorTextPlaceholder: darkBgFouColor
  },

  components: {
    Layout: {
      bodyBg: darkBgFirColor,
      headerBg: darkBgColor,
      siderBg: darkBgColor
    },
    Menu: {
      darkItemColor: darkTextColor,
      darkItemBg: darkBgColor,
      darkSubMenuItemBg: darkBgColor,
      darkItemSelectedColor: darkActiveColor,
      darkItemSelectedBg: darkBgColor,
      darkPopupBg: darkBgColor,
      darkItemHoverBg: darkBgFirColor
    },
    Table: {
      headerColor: darkBgColor,
      borderColor: darkBorderColor,
      cellFontSizeSM: 12
    },
    Select: {
      clearBg: darkBgFouColor,
      selectorBg: darkBgSecColor,
      optionActiveBg: darkBgSecColor,
      multipleItemBg: darkBgSecColor,
      optionSelectedBg: darkBgSecColor
    }
  }
}

function App() {
  console.warn(123)
  const [menus, setMenus] = useState<MenuItem[]>([])
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    getAdminMenus().then((adminMenus: MenuItem[]) => {
      setMenus(adminMenus)
      setLoading(false)

      const pages: Router[] = []

      adminMenus.forEach((item) => {
        if (item.filePath) {
          const filePath = `${item.filePath}/index.tsx`
          pages.push({
            id: item.path,
            path: item.path,
            Component: components[filePath]
              ? lazy(components[filePath])
              : () => <div>页面待开发...</div>
          })
        }
      })

  let themeConfig = darkMode ? darkTheme : lightTheme

  if (loading) {
    return (
      <Spin tip="正在加载..." size="large" style={{ maxHeight: '100vh' }}>
        <div className="w-srceen h-screen flex justify-center items-center"></div>
      </Spin>
    )
  }


  return (
    <ConfigProvider locale={zhCN} theme={themeConfig}>
      <Router />
    </ConfigProvider>
  )
}

export default App
